<template>
  <div class="company">
    <div class="nav" ref="nav">
      <div class="nav_fixed" ref="nav_fixed">
        <!-- 顶部导航 -->
        <div class="header" ref="header">
          <h3 class="logo">公司</h3>
          <van-search
            class="keyWord"
            v-model="keyWord"
            placeholder="请输入关键字"
            @search="keyWordSearch"
          />
        </div>
        <!-- banner区域 -->

        <div class="banner" v-show="!popShow" ref="banner">
          <img src="@/assets/img_banner 2@1.5x.png" alt="" />
        </div>

        <!-- 筛选区域 -->
        <div class="selectcom">
          <SelectCom
            v-model="popShow"
            :show.sync="show"
            ref="selectcom"
            :selectData="selectData"
          >
          </SelectCom>
        </div>
        <!-- 筛选弹出层 -->
        <SelectPopup
          v-if="popShow"
          @closePop="closePop"
          :selectData="selectData"
        ></SelectPopup>
      </div>
    </div>
    <!-- 公司列表 -->
    <!-- <div class="company_list"> -->
    <CompanyList ref="company_list"></CompanyList>
    <!-- </div> -->
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false" z-index="998" />
  </div>
</template>

<script>
// import Mixin from './mixin'
import { mapActions, mapMutations, mapState } from 'vuex'

// 导入筛选区域
import SelectCom from './components/SelectCom.vue'
// 导入弹出层
import SelectPopup from './components/SelectPopup'
// 导入公司列表
import CompanyList from './components/CompanyList.vue'
export default {
  name: 'Company',
  components: { SelectCom, CompanyList, SelectPopup },
  data () {
    return {
      keyWord: '',
      popShow: false,
      // 遮罩层是否显示
      show: false,
      selectData: {
        // 距离筛选
        distance: {
          desc: '由远及近',
          asc: '由近及远'
        },
        // 评分筛选
        grade: {
          '4-5': '4分-5分',
          '3-3.9': '3分-3.9分',
          '2-2.9': '2分-2.9分',
          '1-1.9': '1分-1.9分',
          '0-0.9': '一分以下'
        },
        distance_active: '',
        grade_active: '',
        grade_range: ''
      }
    }
  },
  created () {
    this.initList()
    this.initForm()
    // document.addEventListener('scroll', this.scrollEvent)
  },
  mounted () {
    document.addEventListener('click', this.fn)
  },
  beforeDestroy () {
    document.removeEventListener('click', this.fn)
  },
  computed: {
    ...mapState('company', ['form'])
  },
  methods: {
    ...mapActions('company', ['getCompanyList']),
    ...mapMutations('company', [
      'changeReset',
      'setStart',
      'setQ',
      'changeReset',
      'initForm',
      'initList'
    ]),
    // 搜索框
    async keyWordSearch () {
      // 重置样式
      this.$bus.$emit('initStyle')

      // 重置数据
      this.initForm()
      this.setQ(this.keyWord)
      this.setStart(0)
      this.changeReset(true)
      // 调用公司列表接口
      this.$bus.$emit('getCompanyData', { isScrollTop: true, isFinish: false })
      // 重置输入框
      // this.keyWord = ''
    },
    // 点击非弹框区域，弹框隐藏
    fn (e) {
      if (!this.$refs.nav.contains(e.target)) {
        this.closePop()
      }
    },
    // 关闭弹框事件
    closePop () {
      this.show = false
      this.popShow = false
    },
    // 获取滚动条
    scrollEvent () {
      this.scrollTop =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset
    }
  },
  activated () {
    document.documentElement.scrollTop = this.scrollTop
    document.addEventListener('scroll', this.scrollEvent)
  },
  deactivated () {
    document.removeEventListener('scroll', this.scrollEvent)
  }
}
</script>

<style scoped lang="less">
.company {
  // padding: 0 30.21px 80px;
  background-color: #fff;
  .nav {
    height: 500px;
    // padding: 0 30.21px 80px;
    background-color: #fff;
  }
  .nav_fixed {
    // width: 692px;
    padding: 0 30.21px;
    padding-top: 40px;
    position: fixed;
    z-index: 999;
    background-color: #fff;
  }
  .header {
    display: flex;
    align-items: center;
    height: 68px;

    .logo {
      height: 50px;
      font-family: PingFangSC-Semibold;
      font-size: 36px;
      color: #222222;
      letter-spacing: 0.41px;
      font-weight: 600;
      margin-right: 20px;
    }
    .keyWord {
      flex: 1;
      height: 68px;
      background: #f7f4f5;
      border-radius: 34px;
    }
  }
  .banner {
    margin-top: 40.52px;
    width: 692px;
    height: 254px;
    img {
      width: 100%;
    }
  }
  .selectcom {
    margin-top: 48px;
  }
  // .company_list {
  //   padding: 0 30.21px 50px;
  // }
  // .fade-enter,
  // .fade-leave-to {
  //   opacity: 0;
  // }
  // .fade-enter-active,
  // .fade-leave-active {
  //   transition: all 0.1s;
  // }
}
</style>
